@extends('layout.master')

@section('title','发帖评论统计')

@section('css')
    @parent
    <link href="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.css') }}" rel="stylesheet">
@endsection
@section('main')
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="form-group">
                <label class="col-md-12">用户昵称</label>
                <div class="col-md-12">
                    <input type="text" name="user_name" id="user-name"
                           class="form-control form-control-line tongji">
                </div>
            </div>
        </div>

        <div class="col-md-6 col-sm-12">
            <div class="form-group">
                <label class="control-label">时间</label>
                <div class="example">
                    <input class="column_filter form-control input-daterange-datepicker tongji" type="text" id="time"
                           name="time"/>
                </div>
            </div>
        </div>
    </div>

    <div class="row row-in">
        <div class="col-lg-3 col-sm-6 row-in-br">
            <div class="col-in row">
                <div class="col-md-3 col-sm-3 col-xs-3"><i class="ti-user"></i>
                    <h4 class="text-muted vb">用户昵称</h4></div>
                <div class="col-md-9 col-sm-9 col-xs-9">
                    <h3 class="counter text-right m-t-15 text-danger" id="name">全部</h3></div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6 row-in-br  b-r-none">
            <div class="col-in row">
                <div class="col-md-6 col-sm-6 col-xs-6"><i class="ti-pencil-alt"></i>
                    <h5 class="text-muted vb">评论数</h5></div>
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <h3 class="counter text-right m-t-15 text-info" id="ping">0</h3></div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="progress">
                        <div class="progress-bar progress-bar-info" role="progressbar" aria-valuenow="40" id="lun"
                             aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-3 col-sm-6  b-0">
            <div class="col-in row">
                <div class="col-md-6 col-sm-6 col-xs-6"><i class="ti-receipt"></i>
                    <h5 class="text-muted vb">发帖数</h5></div>
                <div class="col-md-6 col-sm-6 col-xs-6">
                    <h3 class="counter text-right m-t-15 text-warning" id="post">0</h3></div>
                <div class="col-md-12 col-sm-12 col-xs-12">
                    <div class="progress">
                        <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" id="post-c"
                             aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('js')
    @parent
    <!-- Plugin JavaScript -->
    <script src="{{ asset('plugins/bower_components/moment/moment.js') }}"></script>
    <!-- Date range Plugin JavaScript -->
    <script src="{{ asset('plugins/bower_components/bootstrap-daterangepicker/daterangepicker.js') }}"></script>
    <!-- jQuery peity -->
    <script src="{{ asset('plugins/bower_components/jquery-sparkline/jquery.sparkline.min.js') }}"></script>
    <script src="{{ asset('plugins/bower_components/jquery-sparkline/jquery.charts-sparkline.js') }}"></script>

    <script>
        $('.input-daterange-datepicker').daterangepicker({});


        function select(user_name, time) {
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/postings/tongji',
                data: {user_name: user_name, time: time},
                type: 'POST',
                error: function (e) {
                    if (e.readyState === 4 && e.status === 422) {
                        for (var i in e.responseJSON) {
                            if (e.responseJSON[i] !== 'The given data was invalid.') {
                                err = e.responseJSON[i];
                                for (var j in err) {
                                    toasterror(err[j][0]);
                                }
                            }
                        }
                    }
                },
                success: function (data) {
                    var post_c = document.getElementById("post-c");
                    post_c.style.width = data.postings * 20 / 7 + "%";
                    var lun = document.getElementById("lun");
                    lun.style.width = data.pings * 10 / 7 + "%";

                    $("#name").text(data.user_name);
                    $("#ping").text(data.pings);
                    $("#post").text(data.postings);
                }
            })
        }


        $(document).ready(function () {
            select(null, null);
        });

        $(".tongji").change(function () {
            select($("#user-name").val(), $("#time").val());
        });


    </script>
@endsection